<template>
    <view class="welcome">
        <view style="height: 30rpx"></view>
        <view class="row row-ai">
            <view class="message">
                <view class="avatar">
                    <image :src="aiAvatar"></image>
                </view>
                <view class="text markdown-body">
                    <view class="title" v-if="welcomeTitle">{{ welcomeTitle }}</view>
                    <view class="desc" v-if="welcomeDesc">{{ welcomeDesc }}</view>
                   <!-- <view class="tips" v-if="welcomeTips.length > 0">
                        <ul>
                            <block v-for="(item, index) in welcomeTips" :key="index">
                                <li v-if="item" @tap.native="setMessage(item)" :data-text="item">{{ item }}</li>
                            </block>
                        </ul>
                    </view> -->
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            welcomeTitle: '',
            welcomeDesc: '',
            welcomeTips: ''
        };
    },

    props: {
        module: {
            type: String,
            default: 'chat'
        },
        aiAvatar: {
            type: String,
            default: '/others/static/images2/ic_ai_logo.png'
        },
        title: {
            type: String,
            default: ''
        },
        desc: {
            type: String,
            default: ''
        },
        tips: {
            type: String,
            default: ''
        }
    },

    watch: {
        title: function () {
            let title = this.title;
            if (this.module === 'chat') {
                title = '你好！我是' + this.title;
            } else if (this.module === 'cosplay') {
                title = '我是' + this.title;
            }
			this.welcomeTitle = title;
            
        },
        desc: function () {
            let desc = this.desc;
            if (desc) {
                desc = desc.replaceAll('\n', '<br>');
            } else if (this.module === 'cosplay') {
                desc = '请输入你的问题';
            }
			this.welcomeDesc = desc;
        },
        tips: function () {
            let tips = this.tips;
            if (tips) {
                tips = tips.split('\n');
            } else {
                tips = [];
            }
			this.welcomeTips = tips;
        }
    },

    methods: {
		setMessage(text) {
            uni.$emit('setMessage', {
                detail: text
            });
        }
    },

    created: function () {}
};
</script>
<style>
.welcome .message {
    display: flex;
    justify-content: flex-start;
    padding: 40rpx 40rpx;
}

.welcome .message:last-child {
    border-bottom: 0;
}

.welcome .message .text {
    width: 560rpx;
    color: #343541;
    line-height: 52rpx;
    font-size: 32rpx;
    word-break: break-all;
    overflow: hidden;
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
}

.welcome .message .text span {
    display: inline;
}

.welcome .message .avatar {
    width: 48rpx;
    height: 48rpx;
    background: #04babe;
    margin-right: 30rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 4rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6rpx;
    overflow: hidden;
}

.welcome .message .avatar image,
.welcome .message .avatar img {
    width: 48rpx;
    height: 48rpx;
}

.welcome .markdown-body view {
    display: block;
}

.welcome .title {
    color: #222;
    font-size: 36rpx;
    font-weight: 600;
    letter-spacing: 2rpx;
    line-height: 64rpx;
    transition: color 0.1s ease-in-out;
}

.welcome .desc {
    margin: 20rpx 0 !important;
}

.welcome .tips {
    padding: 20rpx;
}

.welcome .tips ul,
.welcome .tips li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.welcome .tips li {
    background: #f7f7f8;
    border-radius: 8rpx;
    margin-bottom: 26rpx;
    padding: 24rpx 30rpx;
    font-size: 28rpx;
    color: #444;
    line-height: 32rpx;
    transition: background 0.1s ease-in-out;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome .tips li:hover,
.welcome .tips li:active {
    background: #eff0f0;
    color: #222;
}
</style>
